<template>
  <view class="container">
    <view class="header">
      <view class="back-icon" @click="goBack">
       <!-- <image src="@/static/c2.png" mode="aspectFit"></image> -->
      </view>
      <text class="title">救援记录</text>
      <view class="more-icon">
        <!-- <image src="@/static/c1.png" mode="aspectFit"></image> -->
      </view>
    </view>
    <view class="record">
		<view class="record-item" v-for="(record, index) in records" :key="index">
		  <view class="record-type-date">
		    <text class="record-type">{{ record.type }}</text>
		    <text class="record-date">{{ record.date }}</text>
		  </view>
		  <view class="record-details">
		    <view class="detail-item">
		      <text class="detail-label">订单编号：</text>
		      <text class="detail-value">{{ record.orderId }}</text>
		    </view>
		    <view class="detail-item" v-if="record.type === '拖车'">
		      <text class="detail-label">起点：</text>
		      <text class="detail-value">{{ record.startLocation }}</text>
		    </view>
		    <view class="detail-item" v-if="record.type === '拖车'">
		      <text class="detail-label">终点：</text>
		      <text class="detail-value">{{ record.endLocation }}</text>
		    </view>
		    <view class="detail-item">
		      <text class="detail-label">位置：</text>
		      <text class="detail-value">{{ record.location }}</text>
		    </view>
		    <view class="detail-item">
		      <text class="detail-label">车牌：</text>
		      <text class="detail-value">{{ record.carPlate }}</text>
		    </view>
		  </view>
		</view>
	</view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
// import uni from '@dcloudio/uni-app';

// 模拟救援记录数据
const records = ref([
  {
    type: '换胎',
    date: '2023-02-15',
    orderId: '121212112487878',
    location: '洛阳市道北路32号XXX小区',
    carPlate: '奔驰FWE4/豫A98FHJ'
  },
  {
    type: '拖车',
    date: '2023-02-15',
    orderId: '121212112487878',
    startLocation: '洛阳市道北路32号XXX小区',
    endLocation: '洛阳市道北路39号XXXXXX小区',
    carPlate: '奔驰FWE4/豫A98FHJ'
  },
  {
    type: '搭电',
    date: '2023-02-15',
    orderId: '121212112487878',
    location: '洛阳市道北路32号XXX小区',
    carPlate: '奔驰FWE4/豫A98FHJ'
  }
]);

// 返回上一页方法
const goBack = () => {
  uni.navigateBack();
};
</script>

<style scoped>
.container {
  background-color: #f5f5f5;
  
  font-family: 'Helvetica Neue', sans-serif;
}

.header {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  background-color: #007aff;
  color: white;
  padding: 10px 15px;
  height: 260rpx;
  border-radius: 10px 10px 0 0;
  margin-bottom: 15px;
}

.back-icon,
.more-icon {
  width: 30px;
  height: 30px;
}

.title {
	margin-top: 18rpx;
  font-size: 26px;
  /* font-weight: 600; */
}
.record{
	margin:-200rpx 15px 0;
}
.record-item {
  background-color: white;
  padding: 15px;
  border-radius: 10px;
  margin-top: 15rpx;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.record-type-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.record-type {
  font-size: 18px;
  font-weight: 600;
  color: #007aff;
}

.record-date {
  font-size: 14px;
  color: #666;
}

.record-details {
  display: flex;
  flex-direction: column;
}

.detail-item {
  margin-bottom: 5px;
}

.detail-label {
  color: #666;
  font-weight: 500;
}

.detail-value {
  color: #333;
}
</style>